import React, { useMemo } from 'react';
import { Space, Tabs } from 'antd';
import { groupBy } from 'lodash-es';
import TabContent from './DialogTabContent';
import { useDeviceStatMapping } from '../../hooks';

/**
 * 弹框内容
 */
function DialogContent(props) {
    const { tabItems, value, onChange } = props;

    const group2ValueMapping = useMemo(() => groupBy(value, 'moduleId'), [value]);
    const deviceStatMapping = useDeviceStatMapping();

    return (
        <Space style={{ display: 'flex' }} direction="vertical" size={10}>
            <Tabs
                type="card"
                defaultActiveKey={tabItems[0]['key']}
                items={tabItems.map(({ label, key }) => {
                    const selectedRows = group2ValueMapping[key] ?? [];

                    return {
                        label: `${label}(${selectedRows.length}/${deviceStatMapping.data?.[key] ?? 0})`,
                        key,
                        children: (
                            <TabContent
                                modelId={key}
                                modelName={label}
                                selectedRows={selectedRows}
                                onSelect={(selectedRows) => {
                                    onChange(Object.values({ ...group2ValueMapping, [key]: selectedRows }).flat());
                                }}
                            />
                        ),
                    };
                })}
            />
        </Space>
    );
}

export default DialogContent;
